<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
  <style>
    #box1{
      width:300px;
      height:100px;
      margin: 25px;
      border:25px solid green;
      padding: 25px;
      background-color: lightgray;
        /*边框直接作用在外边框之上*/
        outline: red;
        outline-style: dashed;
        outline-width: medium;
        /**/
        box-sizing: border-box;


    }
    #box2{
      width:300px;
      height:100px;
      /*上下左右都可设置 也可以单独设置*/
      margin-top: 25px;
      border-bottom:10px solid pink;
      padding-left: 40px;
      background-color: lightgray;
    }
  </style>
</head>
<body>
<!--CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
    Margin(外边距) - 清除边框外的区域，外边距是透明的。
    Border(边框) - 围绕在内边距和内容外的边框。
    Padding(内边距) - 清除内容周围的区域，内边距是透明的。
    Content(内容) - 盒子的内容，显示文本和图像。-->
<!--经常使用div标签划分页面结构 p h1 html标签语义大于作用-->
<p>CSS盒模型本质上是一个盒子，封装周围的HTML元素</p>
<div id="box1">盒子的内容，显示文本和图像。</div>
<div id="box2">清除内容周围的区域</div>

</body>
</html>